<template>
    <fieldset>
        <legend>cart</legend>
        <h2>{{name}}</h2>
        <ul>
            <li v-for="item in carts" :key="item.id">
                <b>商品:{{item.title}}</b>
                &nbsp;
                <b>价格:{{item.price}}</b>
                &nbsp;
                <b>数量:{{item.count}}</b>
                &nbsp;
                <button @click="del(item)">移除购物车</button>
            </li>
        </ul>
        <h1 style="text-align: right;">
            <b>总价格:</b>
            <b>{{total}}</b>
        </h1>
    </fieldset>
</template>
<script>
    import{mapState,mapGetters,mapActions} from "vuex"
    export default{
        
        computed:{
            ...mapState("cart",['name','carts']),
            ...mapGetters("cart",['total']),
            
        },
         methods: {
            ...mapActions('cart', ['REMOVE_CART']),
            del(item) {
                console.log(item)
                this.REMOVE_CART(item)
            }
        },
    }
</script>